<template>
	<view class="pollutantslicence-detail">
		<titleName :name="name" :backShow="true"></titleName>
		<view class="session-wrap">
			<view class="content-wrap">
				<view class="enterprise-name style-wrap">
					<view class="name">
						企业名称:
					</view>
					<view class="val">{{enterpriseMsg.customername}}</view>
				</view>
				<view class="enterprise-name style-wrap">
					<view class="name">
						法定代表人:
					</view>
					<view class="val">{{enterpriseMsg.owner}}</view>
				</view>
				<view class="enterprise-name style-wrap">
					<view class="name">
						社会统一信用代码：
					</view>
					<view class="val">{{enterpriseMsg.creditcode}}</view>
				</view>
				<!-- 	<view class="enterprise-code">
					<view class="name">排污许可证号：</view>
					<view class="val">314159265368979323</view>
				</view> -->
				<view class="sewage style-wrap">
					<view class="name">排污许可证号:</view>
					<view class="val">{{enterpriseMsg.dischargelicense}}</view>
				</view>

				<view class="session style-wrap">
					<view class="name">注册地址：</view>
					<view class="val">{{enterpriseMsg.registeraddress}}</view>
				</view>
				<view class="local-environmenta style-wrap">
					<view class="name">生产经营地址：</view>
					<view class="val">{{enterpriseMsg.customeraddress}}</view>
				</view>
				<!-- <view class="longitude-latitude">
					<view class="name">经纬度：</view>
					<view class="val">河南省郑州市</view>
				</view> -->
				<view class="address style-wrap">
					<view class="name">有效期限：</view>
					<view class="val">{{enterpriseMsg.validdatestr}}</view>
				</view>
				<view class="admin-one style-wrap">
					<view class="name">环保管理员:</view>
					<view class="val">{{enterpriseMsg.hbperson}}&nbsp;{{enterpriseMsg.hbmobile}}</view>
				</view>

				<view class="admin-two style-wrap">
					<!--view class="name">环保管理员2:</view-->
					<view class="name">企业负责人:</view>
					<view class="val">{{enterpriseMsg.qyperson}}&nbsp;{{enterpriseMsg.qymobile}}</view>
				</view>

				<view class="enterprise-type style-wrap">
					<view class="name">行业类别(以环评审批为准):</view>
					<view class="val">{{enterpriseMsg.managementtype}}</view>
				</view>
			</view>

			<!-- <view class="business-license style-wrap">
				<view class="name"><text>*</text>授权委托书</view>
				<view class="val">
					<view class="wrap">
						<image @click="uploadAuthImage"
							:src="enterpriseMsg.authbookurl?enterpriseMsg.authbookurl:'/static/upload-plus-icon.png'"
							mode="" :style="computAuthStyle">
						</image>
						<view class="btm">
							<image
								src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/zhaoxiangji.png"
								mode=""></image>
							<text @click="uploadAuthImage">点击上传授权委托书照片&nbsp;&nbsp;&nbsp;&nbsp;</text><button class="btn"
								@click="downDemo" style="color: blue;">下载模版</button>
			
						</view>
					</view>
				</view>
			</view> -->

			<view class="business-license style-wrap">
				<view class="name">排污许可证照片：</view>
				<view class="val">
					<view class="wrap">
						<image
							:src="enterpriseMsg.dischargelicenseurl?enterpriseMsg.dischargelicenseurl:resourceUrl+'xukezheng.png'"
							mode="" class="xukezheng"></image>
						<!-- :style="computdischargeStyle" -->
						<!-- 	<view class="btm">
							<image
								src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/zhaoxiangji.png"
								mode=""></image>
							<text>点击上传排污许可证自动识别信息</text>
						</view> -->
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import uploadFile from '../../request/uploadFile.js'
	import {
		resourceUrl
	} from '../../request/config'
	import http from '../../request'
	import {
		ref,
		reactive,
		computed

	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	let name = "排污许可"
	let value = ''
	let enterpriseMsg = reactive({})
	let dataTree = ref()
	let range = ref()
	let AuthImageStyle = reactive({
		width: '',
		height: ''
	})
	let dischargeStyle = reactive({
		width: '',
		height: ''
	})
	let computdischargeStyle = computed(() => {
		const MAX_WIDTH = 494;
		const MAX_HEIGHT = 277;
		let ratio;
		if (enterpriseMsg.dischargelicenseurl) {
			if (dischargeStyle.width > dischargeStyle.height) {
				ratio = MAX_WIDTH / dischargeStyle.width
			} else {
				ratio = MAX_HEIGHT / dischargeStyle.height
			}

			const scale = Math.min(ratio, 1); // 确保不会超过原始尺寸
			const newWidth = dischargeStyle.width * scale;
			const newHeight = dischargeStyle.height * scale;
			return {
				width: newWidth + "rpx",
				height: newHeight + "rpx",

			}
		}
	})
	let computAuthStyle = computed(() => {
		const MAX_WIDTH = 600;
		const MAX_HEIGHT = 800;
		let ratio;
		if (enterpriseMsg.authbookurl) {
			if (AuthImageStyle.width > AuthImageStyle.height) {
				ratio = MAX_WIDTH / AuthImageStyle.width
			} else {
				ratio = MAX_HEIGHT / AuthImageStyle.height
			}
			const scale = Math.min(ratio, 1); // 确保不会超过原始尺寸
			const newWidth = AuthImageStyle.width * scale;
			const newHeight = AuthImageStyle.height * scale;
			return {
				width: newWidth + "rpx",
				height: newHeight + "rpx",

			}
		}

	})
	onLoad((e) => {
		http({
			url: "/enterprise/detail",
			data: {
				id: e.id
			}
		}).then((res) => {
			if (res.code == 0) {
				for (let key in res.data) {
					enterpriseMsg[key] = res.data[key]
				}

			}
		})
	})
	onShow(() => {

		let enterprise = JSON.parse(uni.getStorageSync('enterprisemsg'))
		// for (let key in enterprise) {
		// 	enterpriseMsg[key] = enterprise[key]
		// }
		// enterpriseMsg.customername = uni.getStorageSync('customername')
		// enterpriseMsg.creditcode = uni.getStorageSync('creditcode')
		// enterpriseMsg.hbmobile = uni.getStorageSync('phoneone')



	})
	// https://splendid.oss-cn-beijing.aliyuncs.com/static/moban/%E6%8E%88%E6%9D%83%E5%A7%94%E6%89%98%E4%B9%A6.docx
	let downDemo = () => {
		uni.downloadFile({
			url: 'https://splendid.oss-cn-beijing.aliyuncs.com/static/moban/%E6%8E%88%E6%9D%83%E5%A7%94%E6%89%98%E4%B9%A6.docx', //仅为示例，并非真实的资源
			success: (res) => {
				console.log(res, 'res');
				if (res.statusCode === 200) {
					//保存文件
					let tempFile = res.tempFilePath;

					uni.openDocument({
						filePath: tempFile,
						showMenu: true, //是否可以分享
						success: (res) => {
							uni.hideLoading()
							console.log(res);
						},
						fail: (e) => {
							uni.showToast({
								title: '打开失败',
								icon: "error",
								duration: 2000
							})
						}
					})

				}
			}
		});
	}
	let save = () => {
		let reg = /^1\d{10}$/
		if (!reg.test(enterpriseMsg.hbmobile) || !reg.test(enterpriseMsg.hbmobilesecond)) {
			uni.showToast({
				title: '手机格式不正确',
				icon: 'error',
				mask: true
			})
			return
		}
		let keys = Object.keys(enterpriseMsg)
		if (!enterpriseMsg.authbookurl) {
			uni.showToast({
				title: "请上传授权委托书"
			})
			return
		}
		if (!enterpriseMsg.dischargelicenseurl) {
			uni.showToast({
				title: "请上传排污许可证"
			})
			return
		}
		if (keys.length != 12) {
			uni.showToast({
				title: "信息未填写完整",
				icon: 'error'
			})
			return
		}
		// http({
		// 	url: '/enterprise/commitEnterpriseInfo',
		// 	data: enterpriseMsg
		// }).then((res) => {
		// 	if (res.code == 0) {
		// 		uni.showToast({
		// 			title: '保存成功',
		// 			icon: 'none',
		// 			mask: true
		// 		})
		// 		setTimeout(() => {
		// 			uni.switchTab({
		// 				url: "/pages/home/home"
		// 			})
		// 		})
		// 	}

		// })
	}
	let environmentaChange = (e) => {
		enterpriseMsg.supportdepartmentid = range.value[e].id
	}
	let sessionChange = (e) => {

		let id = e.detail.value[e.detail.value.length - 1].value

		enterpriseMsg.district = id
	}


	let uploadAuthImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 1,
			success: function(res) {
				console.log(res, 'res');
				let tempFilePaths = res.tempFilePaths

				uploadFile({
					filePath: tempFilePaths[0]
				}).then((res) => {

					if (res.code == 0) {
						uni.getImageInfo({
							src: res.data.url,
							success: function(imageInfoRes) {

								AuthImageStyle.width = imageInfoRes.width
								AuthImageStyle.height = imageInfoRes.height


							}
						});
						enterpriseMsg.authbookurl = res.data.url
					}

				})


			}
		});
	}
	let uploadImage = () => {

		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 1,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths
				uploadFile({
					filePath: tempFilePaths[0]
				}).then((res) => {

					if (res.code == 0) {
						uni.getImageInfo({
							src: res.data.url,
							success: function(imageInfoRes) {

								dischargeStyle.width = imageInfoRes.width
								dischargeStyle.height = imageInfoRes.height
								console.log(dischargeStyle, 'dischargeStyle');

							}
						});
						enterpriseMsg.dischargelicenseurl = res.data.url
					}

				})


			}
		});

	}
	// http({
	// 	url: '/listitem/getdepartment'
	// }).then((res) => {
	// 	if (res.code == 0) {
	// 		let arr = res.data
	// 		for (var i = 0; i < arr.length; i++) {
	// 			arr[i].text = arr[i].departmentname
	// 			arr[i].value = i
	// 		}
	// 		range.value = arr

	// 	}

	// })

	function mapTree(data) {
		console.log(data, 'data');
		if (data.length <= 0) return

		return data.map((item) => {
			item.text = item.regionname
			item.value = item.id
			if (item.lstSubNodes && item.lstSubNodes.length > 0) {
				item.children = item.lstSubNodes
				for (var i = 0; i < item.lstSubNodes.length; i++) {

					item.children[i].text = item.lstSubNodes[i].regionname
					item.children[i].value = item.lstSubNodes[i].id
					if (item.lstSubNodes[i].lstSubNodes && item.lstSubNodes[i].lstSubNodes.length > 0) {
						mapTree(item.lstSubNodes[i].lstSubNodes)
					}


				}
			}
			return item

		})

	}
	// http({
	// 	url: '/region/datalisttree'
	// }).then((res) => {
	// 	if (res.code == 0) {
	// 		let data = res.data
	// 		let cc = mapTree(data)

	// 		console.log(cc, 'data');
	// 		dataTree.value = data



	// 	}

	// })
	// http({
	// 	url: '/listitem/getmodule'
	// }).then((res) => {
	// 	console.log(res, 'res');
	// })
</script>

<style lang="scss" scoped>
	:deep(.data-pickerview) {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	:deep(.selected-area) {
		padding-left: 14rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}

	:deep(.uni-select__input-box) {
		padding-right: 5rpx;
	}

	:deep(.data-picker::placeholder) {
		color: red !important;
		padding-left: 30rpx;
	}

	:deep(.uni-icons.uniui-clear) {
		font-size: 22rpx;
	}

	:deep(.selected-list) {
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
	}

	:deep(.input-value-border) {
		border: none;
		height: 100%;
		padding-right: 25rpx;
	}

	:deep(.uni-data-tree) {
		padding-right: 5rpx;
	}

	:deep(.popper__arrow) {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	:deep(.popper__arrow) {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	:deep(.uni-select__input-text) {

		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}

	.two {
		width: 100%;
		padding-right: 30rpx;
	}

	:deep(.uni-select) {
		border: none;
		padding-left: 20rpx;
	}

	:deep(.uni-select) {
		margin-left: 10rpx;
	}

	input {
		padding-left: 30rpx;

		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		padding-right: 20rpx;
	}

	.pollutantslicence-detail {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.bgc-line {
			height: 15upx;
			width: 100vw;
			background: #F3F5F7;
		}

		.session-wrap {
			height: calc(100vh - 160upx);
			overflow-y: scroll;

			.business-license,
			.sewage-discharge {
				// margin-top: 20rpx;
				padding-bottom: 20rpx;
				margin-top: 27upx;
				height: 511upx;

				.btn-wrap {
					display: flex;
					align-items: center;
					padding: 0 202upx;
					justify-content: space-between;
					margin-top: 48upx;

					.del {
						width: 158rpx;
						height: 54rpx;
						background: #FFFFFF;
						border-radius: 27rpx;
						border: 1px solid #A7A7A7;
						line-height: 54upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #949494;

					}

					.recognition {
						width: 158rpx;
						height: 54rpx;
						line-height: 54upx;
						background: #0874FA;
						border-radius: 27rpx;


						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #FEFEFE;

					}
				}

				.name {

					font-size: 29rpx;
					color: #666;
					line-height: 33rpx;
					padding-left: 30rpx;

					width: auto !important;

					text {
						color: #F82A24;
					}

				}

				.val {
					width: 100vw;
					padding: 40upx 28rpx 0 28rpx;
					font-size: 28upx;
					color: #666;

					.wrap {
						width: 100%;
						height: 376rpx;
						background: #FFFFFF;
						border-radius: 14rpx;
						border: 1px dashed #BFBFBF;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						overflow: hidden;

						.xukezheng {
							width: 494rpx;
							height: 277rpx;

						}
					}

					.btm {
						margin-top: 13rpx;
						display: flex;
						align-items: center;

						image {
							width: 36rpx;
							height: 29rpx;
							margin-right: 15rpx;
						}

						text,
						button {

							font-weight: 400;
							font-size: 28rpx;
							color: #CBCDD5;


						}
					}


				}
			}

			.sewage-discharge {
				margin-top: 20rpx;
				padding-bottom: 62rpx;

				.val {
					.wrap {
						image {
							width: 445rpx !important;
							height: 315rpx !important;
						}
					}
				}
			}

			.btn-wrap {
				padding: 64rpx 39rpx 40rpx 39rpx;

				button {
					width: 672rpx;
					height: 88rpx;
					background: #0874FA;
					border-radius: 44rpx;
					line-height: 88rpx;
					font-weight: 500;
					font-size: 31rpx;
					margin-bottom: 42upx;
					color: #FFFFFF;

				}

				text {
					width: 100;
					height: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #F83933;


				}
			}

			.content-wrap {
				padding-top: 20rpx;

				.style-wrap {
					padding-left: 30rpx !important;
					padding-right: 28rpx !important;
					display: flex;
					// justify-content: space-between;

					.name {
						display: flex;


						font-weight: 400 !important;
						font-size: 29rpx !important;
						color: #666 !important;

						text {
							color: #F82A24 !important;
						}
					}

					.val {


						height: 59rpx;
						display: flex;
						// justify-content: flex-end;
						color: #333 !important;
						font-size: 28upx;
						// background: #FAFAFA;
						// border-radius: 7rpx;
						// border: 1px solid #BFBFBF;

						input {
							width: 100%;
						}
					}
				}

				view {
					display: flex;
					// justify-content: space-between;
					height: 85rpx;
					padding: 48rpx 45rpx 45rpx 45rpx;
					align-items: center;

					.name {

						font-weight: 400;
						font-size: 29rpx;
						color: #666666;

						padding: 0;
					}

					.val {
						margin-left: 10upx;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						padding: 0;
					}
				}
			}
		}


	}
</style>